<#assign className = table.className>
<#assign classNameLower = className?uncap_first>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../commons/taglibs.jsp" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>list</title>
    <link href="${r"${ctx}"}/js/layui/css/layui.css"  rel="stylesheet"  media="all">
    <style type="text/css">
        /*功能按钮与table列表间距*/
        .layui-table-view {
            margin: 2px 0;
        }
        .layui-form-item {
            margin-bottom: 5px;
        }
        .layui-form-label {
            padding: 5px 10px;
        }
        .layui-input {
            height: 30px;
        }
        .layui-input-block {
            min-height: 30px;
        }
    </style>

</head>
<body>
<!--搜索 -->
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-form"  style="height: 75px">
    <!--模版默认展示两行搜索，可根据具体展示效果自行调整页面 -->
    <table border="0"  style="margin: 5px 1px 0px;font-size: 12px;">
        <tr>
            <td>
                <div class="layui-form-item layui-bg-gray">
                    <label class="layui-form-label">账号:</label>
                    <div class="layui-input-block">
                        <input type="text" id="loginname" name="loginname" placeholder="请输入账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item layui-bg-gray">
                    <label class="layui-form-label">角色:</label>
                    <div class="layui-input-block">
                        <select id="roleid" name="roleid"  lay-filter="role" lay-search>
                            <option value=""></option>
                            <option value="1">超管</option>
                            <option value="2">编辑人员</option>
                            <option value="3">审核人员</option>
                            <option value="4">日常管理</option>
                            <option value="5">运维管理</option>
                        </select>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="layui-form-item layui-bg-gray">
                    <label class="layui-form-label">状态:</label>
                    <div class="layui-input-block">
                        <select name="status" lay-filter="status" lay-search>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>
            </td>

            <td>
                <div class="layui-form-item" style="width:55px">
                    <div class="layui-input-block" style="margin-left:5px">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="f_search();">搜索</button>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<!-- 功能按钮-->
<div class="layui-btn-group">
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="toolbarBtnItemClick('add');"><i class="layui-icon">&#xe610;</i>新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="toolbarBtnItemClick('edit');"><i class="layui-icon">&#xe610;</i>修改</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="toolbarBtnItemClick('view');"><i class="layui-icon">&#xe610;</i>查看</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="toolbarBtnItemClick('delete');"><i class="layui-icon">&#xe610;</i>删除</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick = "toolbarBtnItemClick('refresh')"><i class="layui-icon">&#xe610;</i>刷新</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick = "toolbarBtnItemClick('search')"><i class="layui-icon">&#xe610;</i>搜索</button>
</div>
<!--数据table -->
<table class="layui-hide" id="gridlist" lay-filter="grid" ></table>
 <!-- js-->
 <script src="${r"${ctx}"}/js/layui/layui.js"></script>

 <script type="text/javascript">
    var $ ;//需要在user中初始化，否则无效
    var table;
    layui.use('table', function(){
        table = layui.table;
        $ = layui.$;//引入jQuery

        //方法级渲染
        table.render({
            elem: '#gridlist'
            ,url: '${r"${ctx}"}/${classNameLower}/getlist'
            ,method :'post'
            ,cols: [[
                {title:'序号',type:'numbers'}
                ,{type:'checkbox',width:35}
                <#list table.columns as column>
                <#if column.columnNameLower="id">
                ,{field:'id', title: 'ID', width:80,sort:true}//fixed true 固定列
                <#else>
                ,{field:'${column.columnNameLower}', title: '<%=${className}.ALIAS_${column.constantName}%>'}
                </#if>
                </#list>
                ,{fixed: 'right', title: '操作',width:180, align:'center', toolbar: '#barTools'}
             ]]
            ,where: {sortName: 'id',sortOrder: 'desc'}
            ,request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                ,statusCode: 200 //成功的状态码，默认：0
                //,msgName: 'hint' //状态信息的字段名称，默认：msg
                ,countName: 'total' //数据总数的字段名称，默认：count
                ,dataName: 'rows' //数据列表的字段名称，默认：data
            }
            ,height:'full-115'//消息体高度537,设置成'auto'表格容器不会出现纵向滚动条
           // ,initSort:{field:'id', type:'desc'}
            ,id: 'gridReload'
            ,page: {
                theme: '#1e9fff'
            } //Boolean/Object
            ,even:true
            ,size: 'sm' //小尺寸的表格
            ,limits: [50,150, 200]
            ,limit: 50 //每页默认显示的数量
        }); // table

        //监听工具条
        table.on('tool(grid)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                console.log(data);//json
                layer.msg('查看操作'+data.loginname);
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        }); //工具条

        layui.use('form', function(){
            var form = layui.form;

            return false;
        });

    });

    //工具条事件
    function toolbarBtnItemClick(id) {
        switch (id) {
            case "add":
                var tmpurl = "${r"${ctx}"}/${classNameLower}/savedetail";
                f_add(tmpurl);
                break;
            case "edit":
                var checkStatus = table.checkStatus('gridReload');
                //console.log(checkStatus.data[0].id);
                if(checkStatus.data.length == 0){
                    layer.alert('请选择要修改的内容!',{title:'提示',icon:7,closeBtn: 0});
                    return;
                }
                if(checkStatus.data.length > 1){
                    layer.alert('抱歉，只支持单条修改!',{title:'提示',icon:7,closeBtn: 0});
                    return;
                }
                var id = checkStatus.data[0].id;
                var tmpurl = "${r"${ctx}"}/${classNameLower}/editdetail?id="+id;
                f_edit(tmpurl);
                break;
            case "delete":
                var checkStatus = table.checkStatus('gridReload');
                if(checkStatus.data.length == 0){
                    layer.alert('请至少选择一条内容!',{title:'提示',icon:7,closeBtn: 0});   //取消右上角x号
                    return;
                }
                layer.confirm('您确认要删除选择的这些项吗?', {
                    btn: ['确定','取消'] //按钮
                    ,title:'提示'
                    ,icon:3
                    ,closeBtn: 0
                }, function(index){//确定
                    f_delete(checkStatus.data);
                    layer.close(index);
                }, function(index){//取消
                    layer.close(index);
                });
                break;
            case "view":
                var checkStatus = table.checkStatus('gridReload');
                //console.log(checkStatus.data[0].id);
                if(checkStatus.data.length == 0){
                    layer.alert('请选择要查看的内容!',{title:'提示',icon:7,closeBtn: 0});
                    return;
                }
                if(checkStatus.data.length > 1){
                    layer.alert('抱歉，只支持单条查看!',{title:'提示',icon:7,closeBtn: 0});
                    return;
                }
                var id = checkStatus.data[0].id;
                var tmpurl = "${r"${ctx}"}/${classNameLower}/viewdetail?id="+id;
                f_view(tmpurl);
                break;
            case "refresh":
                f_reloadgrid();
                break;
        }
    }

    /** 刷新grid*/
    function f_reloadgrid(){
        table.reload('gridReload',{
            page: {curr: 1 }//重新从第 1 页开始
           // ,where: {sortname: 'ID',sortorder: 'DESC'}
        });
    }//刷新

    /**新增*/
    function f_add(url){
        layer.open({
            type: 2,
            title: '新 增',
            //shadeClose: true,
            maxmin: true,
            shade: 0.8,
            area: ['580px', '90%'],
            content: url //iframe的url
            ,end:function(){//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数
                f_reloadgrid();
            }
        });
    }//新增

    /**修改*/
    function f_edit(tmpurl){
        layer.open({
            type: 2,
            title: '修 改',
            //shadeClose: true,
            maxmin: true,
            shade: 0.8,
            area: ['580px', '90%'],
            content: tmpurl //iframe的url
            ,end:function(){//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数
                f_reloadgrid();
            }
        });
    }//修改

    /**修改*/
    function f_view(tmpurl){
        layer.open({
            type: 2,
            title: '查 看',
            //shadeClose: true,
            maxmin: true,
            shade: 0.8,
            area: ['580px', '90%'],
            content: tmpurl //iframe的url
            ,end:function(){//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数
                f_reloadgrid();
            }
        });
    }//修改

    /** 删除 */
    function f_delete(selecteds) {
        var ids = CM.getGridIDs(selecteds);
        $.ajax({
            url:"${r"${ctx}"}/${classNameLower}/delete",
            data:{'ids':ids},
            type:"post",
            dataType:"json",
            success:function(data){
                layer.alert('删除成功!'+data.msg,{title:'提示',icon:1,closeBtn: 0},function (index) {
                    f_reloadgrid();
                    layer.close(index);
                });
            },
            error:function(data){
                layer.alert('错误',data.msg);
            }
        });
    }//删除

    /** 搜索*/
    function    f_search(){
        table.reload('gridReload',{
            page: {curr: 1 }//重新从第 1 页开始
            ,where: {
                loginname:$('#loginname').val()
                ,roleid:$('#roleid').val()
            }
        });
    }//刷新
 </script>
<script type="text/html" id="barTools">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 <script type="text/html" id="statusTpl">
    {{#  if(d.status == 1){ }}
      启用
    {{#  } else { }}
      禁用
    {{#  } }}
 </script>
<script type="text/html" id="genderTpl">
    {{#  if(d.gender == 1){ }}
     男
    {{#  } else { }}
     女
    {{#  } }}
</script>
</body>
</html>
